<template>
    <div class="tab-header clearfix" style="font-size: 14px;">
        <ul class="tab-header-list pull-left">
            <li class="tab-header-item"
            v-for="(item, index) in channels.lists"
            :key="item.name"
            :class="{'active': channels.active == item.name}"
            @click.stop="switchChannel(item, index)"
            >
            {{item.text}}
            </li>
        </ul>
        <div class="follow-item pull-left">
            <span class="btn-follow" @click.stop="followAction">关注</span>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        channels: {
            type: Object,
            // default:{
            //     active: '',
            //     lists: [
            //         {'name': 'interact',  text: '拍卖互动',     index: 0},
            //         {'name': 'style',   text: '拍卖方式',       index: 1},
            //         {'name': 'watching', text: '边买边看',      index: 2},
            //         {'name': 'pathway',  text: '付款通道',      index: 3}
            //     ]
            // }
        }
    },
    data() {
        return {
        };
    },
    computed: {},
    methods: {
        switchChannel(){

        },
        followAction(){

        }
    },
    created() {},
    mounted() {}
};
</script>
<style lang="scss" scoped>
.tab-header {
  height: 100px;
  font-size: 32px;
  line-height: 100px;
  background-color: #fff;
  .tab-header-list {
    width: 75%;
    display: flex;
  }

  .tab-header-item {
    color: #2a2a2a;
    position: relative;
    text-align: center;
    flex: 1;
    &.active{ 
      color: #1549eb; 
      &:after {
        content: '';
        width: 100%;
        height: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #1549eb; 
      }  
    }

  }

  .follow-item {
    width: 25%;
    text-align: center;
    > .btn-follow {
      display: inline-block;
      width: 130px;
      height: 56px;
      line-height: 56px;
      color: #fff;
      background: linear-gradient(#103ee7, #318bff);
      border-radius: 28px;
    }
  }
}
</style>